<template>
  <div class="container">
    <el-card style="margin: 10px">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="关键字" style='padding-left:20px'>
          <el-input v-model="input" placeholder="根据编号搜索"></el-input>
        </el-form-item>
        <el-form-item class="position">
          <el-button size="mini" @click="clearBtn">清除</el-button>
          <el-button type="primary" size="mini" @click="searchBtn"
            >搜索</el-button
          >
        </el-form-item>
      </el-form>
      <el-row class="message" type="flex" align="middle">
        <el-col>
          <i class="el-icon-info pic"></i>
          <span class="content">数据一共{{ page.total }}条</span>
        </el-col>
      </el-row>
      <el-table
        :data="list"
        style="width: 100%; margin-top: 18px"
        :header-cell-style="{ backgroundColor: '#fafafa' }"
      >
        <el-table-column fixed prop="id" label="编号" width="190">
        </el-table-column>
        <el-table-column
          prop="questionType"
          label="题型"
          width="80"
          :formatter="formatFormOfEmployment"
        >
        </el-table-column>
        <el-table-column prop="questionIDs" label="题目编号" width="240">
          <template slot-scope="scope">
            <el-button
              type="text"
              v-for="(item, index) in scope.row.questionIDs"
              :key="index"
              @click="qNum(item.id,scope.row.questionType)"
            >
              {{ item.number }}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column prop="addTime" label="录入时间" width="200">
        </el-table-column>
        <el-table-column prop="totalSeconds" label="答题时间(s)" width="160">
        </el-table-column>
        <el-table-column prop="accuracyRate" label="正确率"> </el-table-column>
        <el-table-column prop="userName" label="录入人"> </el-table-column>
        <el-table-column label="操作" width="120">
          <template v-slot="{ row }">
            <div class="bgc">
              <i
                class="el-icon-delete"
                style="color: #f59698; font-size: 12px"
                @click="delBtn(row.id)"
              ></i>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="end" style="margin-top: 20px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.page"
          :page-sizes="[5, 10, 20, 50]"
          background
          layout="prev, pager, next, sizes, jumper"
          :total="page.total"
          :page-size="page.pagesize"
        >
        </el-pagination>
      </el-row>
    </el-card>
    <el-dialog title="题目预览" :visible.sync="visiblePreview">
      <questions-preview  ref="topicPreview" @close='visiblePreview=$event'></questions-preview>
    </el-dialog>
  </div>
</template>

<script>
import { randoms, removeRandoms } from '@/api/hmmm/questions'
import { questionType } from '@/api/hmmm/constants'
import QuestionsPreview from '../components/questions-preview.vue'
export default {
  name: 'PleaseList',
  props: {},
  components: { QuestionsPreview },
  data () {
    return {
      input: '',
      list: [],
      page: {
        page: 1,
        pagesize: 20,
        total: 0
      },
      visiblePreview: false
    }
  },
  async created () {
    this.getdata()
  },
  mounted () {},
  methods: {
    async getdata () {
      const { data: { items, counts } } = await randoms(this.page)
      // console.log(items)
      this.list = items
      this.page.total = counts
    },
    clearBtn () {
      this.input = ''
    },
    formatFormOfEmployment (row, column, cellValue) {
      // console.log(cellValue)
      const f = questionType.find(t => t.value === Number(cellValue))
      // console.log(f)
      return f ? f.label : '未知'
    },
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.page.page = 1
      this.page.pagesize = val
      this.getdata()
    },
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.page.page = val
      this.getdata()
    },
    searchBtn () {
      this.page.page = 1
      // console.log(this.input)
      // this.getdata()
      Object.assign(this.page, {
        keyword: this.input
      })
      // console.log(this.page)
      randoms(this.page)
      this.getdata()
    },
    delBtn (id) {
      // console.log(typeof id)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        removeRandoms({ id })
        this.getdata()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
      // console.log(id)
    },
    qNum (id) {
      // console.log(id)
      this.visiblePreview = true
      // console.log(this.$refs.questionTypes)
      if (this.visiblePreview) {
        this.$nextTick(() => {
          this.$refs.topicPreview.getData(id)
        })
      }
    }
  },
  watch: {},
  computed: {}
}
</script>

<style lang="less" scoped>
.container {
  .message {
    background-color: #f4f4f5;
    height: 40px;
    .pic {
      color: #909399;
      padding: 0 10px 0 15px;
    }
    .content {
      font-size: 12px;
      color: #9aa0b7;
    }
  }
  .bgc {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #fcdbdb;
    background-color: #fef0f0;
    text-align: center;
    line-height: 30px;
  }
}
/deep/ .cell {
  .el-button + .el-button {
    margin: 0 !important;
  }
  .el-button--medium {
    padding: 3px 0;
  }
}
.demo-form-inline {
  display: flex;
  // flex:1;
  justify-content: space-between;
}
</style>
